@let empty = instances() !== undefined && !filteredInstances().length && !isLoading();

<div class="table-header">
  @if (checkedInstances.length > 0) {
    <ix-instance-list-bulk-actions
      [checkedInstances]="checkedInstances"
      (resetBulkSelection)="resetSelection()"
    ></ix-instance-list-bulk-actions>
  }
</div>

<div class="item-search">
  <ix-fake-progress-bar
    class="loader-bar"
    [loading]="isLoading()"
  ></ix-fake-progress-bar>

  <ix-search-input1
    [maxLength]="100"
    [disabled]="empty"
    [value]="searchQuery()"
    (search)="onSearch($event)"
  ></ix-search-input1>
</div>

@if (empty) {
  <ix-empty [conf]="emptyConfig()"></ix-empty>
} @else {
  <div class="instances">
    <div class="instances-header-row">
      <div class="cell checkbox">
        @if (instances().length) {
          <mat-checkbox
            color="primary"
            ixTest="select-all-instances"
            [checked]="isAllSelected"
            [indeterminate]="!isAllSelected && !!selection.selected.length"
            [disabled]="filteredInstances().length === 0"
            (change)="toggleAllChecked($event.checked)"
          ></mat-checkbox>
        }
      </div>
      <div class="cell">{{ 'Name' | translate }}</div>
      <div class="cell">{{ 'Status' | translate }}</div>
      <div class="cell">{{ 'Type' | translate }}</div>
      <div class="cell actions">{{ 'Controls' | translate }}</div>
    </div>

    @for (instance of filteredInstances(); track instance.id) {
      <ix-instance-row
        [instance]="instance"
        [class.selected]="selectedInstance()?.id === instance.id"
        [selected]="selection.isSelected(instance.id)"
        (click)="navigateToDetails(instance)"
        (selectionChange)="selection.toggle(instance.id)"
        (keydown.enter)="navigateToDetails(instance)"
      ></ix-instance-row>
    }
  </div>
}
